/*eslint-disable*/
import React from 'react';
import { withRouter } from 'react-router-dom';
import BaseTable from '@/components/table/index';
import '../../mysite.scss';
import { Button, Switch, Icon, Row, Col, Tree, Modal, message } from 'antd';
import pic from '@/assets/img/pic.jpg';
import Title from '@/components/mysite/title';
import Api from '@/api/index'

const { TreeNode, DirectoryTree } = Tree;
const { confirm } = Modal;


class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            columns: [],
            tools: [],
            btns: [],
            batch: [],
            select: true,
            selectRows: [],
            listQuery: {
                pageSize: 10,
                pageNumber: 1,
                username: '',
                mobile: '',
                status: ''
            },
            total: 0,
            treeData: []
        }

    }

    componentWillMount() {
        // table columns
        const columns = [
            {
                title: '序号',
                width: 80,
                key: 'index',
                render: (text, record, index) => (index + 1)
            },
            {
                title: '用户名',
                dataIndex: 'username',
                width: 200,
                render: (text, record, index) => {
                    return (
                        <div className="table_cell_user">
                            <img className="pic" src={pic} />
                            <span className="txt">{text}</span>
                        </div>
                    )
                }
            },
            {
                title: '用户手机号',
                dataIndex: 'mobile',
                width: 150
            },
            {
                title: '用户邮箱',
                dataIndex: 'email',
                width: 150,
            },
            {
                title: '用户状态',
                dataIndex: 'status',
                width: 100,
                render: (text, record, index) => {
                    return (
                        <Switch
                            checked={text == 0 ? true : false}
                            checkedChildren={<Icon type="check" />}
                            unCheckedChildren={<Icon type="close" />}
                        />
                    )
                }
            },
            {
                title: '所属平台',
                dataIndex: 'platform',
                width: 150,
            },
            {
                title: '是否为超级管理员',
                dataIndex: 'isSuper',
                width: 100,
            },
            {
                title: '更新时间',
                dataIndex: 'updatedAt',
                width: 150,
            },
            {
                title: '创建时间',
                dataIndex: 'createdAt',
                width: 150,
            },
            {
                title: '操作',
                key: 'action',
                width: 150,
                fixed: 'right',
                render: (text, record, index) => {
                    return (<div className="table_action_group">
                        <Button type="primary" size="small" onClick={this.handleEdit.bind(this, text)}>编辑</Button>
                        <Button type="danger" size="small" onClick={this.handleRowDel.bind(this, text)}>删除</Button>
                    </div>)
                }
            }
        ];
        // 查询搜索
        const tools = [
            { key: 'username', label: '用户名' },
            { key: 'mobile', label: '手机号' },
            {
                key: 'status',
                label: '状态',
                type: 'select',
                option: [
                    { name: '全部', value: '' },
                    { name: '正常', value: 1 },
                    { name: '禁用', value: 0 }
                ]
            },
        ];
        //操作按钮
        const btns = [
            { name: '添加', action: this.handleAdd, theme: 'primary' },
        ]
        //批量操作
        const batch = {
            action: this.handleBatch,
            options: [
                { name: '删除', value: 'handleDel' },
            ]
        }
        this.setState({
            columns: columns,
            handleRow: this.handleRow,
            tools: tools,
            batch: batch,
            btns: btns
        })

        //获取列表
        this.getList(this.state.listQuery);
        this.getStructList();
    }
    //添加
    handleAdd = () => {
        this.props.history.push("/system/user/handle");
    }
    //编辑
    handleEdit = (params) => {
        this.props.history.push({ pathname: "/system/user/handle", state: { key: params.key } })
    }
    //单个删除
    handleRowDel = (params) => {
        const that = this;
        confirm({
            title: '提示',
            content: '是否确认删除该条数据？',
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk() {
                Api.delUserById(params.id).then(res => {
                    if(res.code == 200){
                        message.success('删除成功')
                        that.getList(that.state.listQuery)
                    }
                })
            }
        });
    }
    //批量操作
    handleBatch = (params) => {
        if (params == '') {
            message.error('请选择批量操作类型');
            return false;
        }
        if (this.state.selectRows.length == 0) {
            message.error('请选择数据');
            return false;
        }
        switch (params) {
            case 'handleDel':
                confirm({
                    title: '提示',
                    content: '是否确认删除选中数据？',
                    okText: 'Yes',
                    okType: 'danger',
                    cancelText: 'No',
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
                break;
        }
    };
    //事件传递
    handleRow = (type, value) => {
        switch (type) {
            case 'selectRow':
                this.setState({
                    selectRows: value
                })
                break;
            case 'search':
                let search = Object.assign({}, this.state.listQuery, value)
                this.setState({ listQuery: search }, () => {
                    this.getList(this.state.listQuery);
                })
                break;
            case 'pageChange':
                let pageChange = Object.assign({}, this.state.listQuery, value)
                this.setState({ listQuery: pageChange }, () => {
                    this.getList(this.state.listQuery);
                })
                break;
        }
    }

    onSelect = (keys, event) => {
        console.log('Trigger Select', keys, event);
    };

    onExpand = () => {
        console.log('Trigger Expand');
    };

    //用户列表
    getList = (listQuery) => {
        console.log(listQuery)
        Api.getUserList(listQuery).then(res => {
            if (res.code == 200) {
                this.setState({ data: res.data.result, total: res.data.total })
            }
        })
    }
    //组织机构列表
    getStructList = () => {
        Api.getStructList().then(res => {
            if (res.code == 200) {
                this.setState({ treeData: res.data.result })
            }
        })
    }

    renderTree = (treeData) => {
        return treeData.map((item) => {
            if (item.children && Array.isArray(item.children)) {
                return (
                    <TreeNode title={item.name} key={item.id}>
                        {this.renderTree(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={item.name} key={item.id} />;
        });

    }

    render() {
        const { treeData } = this.state;
        return (
            <div className="table_box_bg">
                <Row gutter={[15, 10]}>
                    <Col xs={5} sm={5} md={5}>
                        <Title title="组织机构" />
                        {treeData.length > 0 ? (<DirectoryTree
                            multiple={false}
                            defaultExpandAll
                            onSelect={this.onSelect}>
                            {this.renderTree(treeData)}
                        </DirectoryTree>) : null}
                    </Col>
                    <Col xs={19} sm={19} md={19}>
                        <BaseTable {...this.state} />
                    </Col>
                </Row>
            </div>
        )
    }
}

export default withRouter(User)
